<template>
  <div class="me-view-comment-item">
    <div class="me-view-comment-author">
      <div style="float:left;">
        <a class="">
          <el-avatar shape="square" style="margin-top: 5px" :size="40" :src="comment.avatar"></el-avatar>
        </a>
      </div>
      <div class="me-view-info">
        <span class="me-view-nickname">{{comment.nikeName}}</span>  
        <span style="color: #666; font-family: fangsong; font-size: 16px; font-weight: 700;">{{rootCommentCounts - index}}楼·<span>{{comment.createTime}}</span></span>
        <div class="me-view-comment-tools">
          <a class="me-view-comment-tool" @click="showCommentInput(comment.id)">
            <i class="me-icon-comment"></i>回复
          </a>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <div style="margin-top:-20px; margin-left: 6%; color: white;">
      <p class="me-view-comment-content">{{comment.content}}</p>
      <commentInput :commentShow="comment.id === activeCommentId" :commentObj="comment" @getArticleComments="getArticleComments"></commentInput>
      <div class="me-reply-list">
        <div class="me-reply-item" v-for="c in comment.blobCommentsVOList" :key="c.id">
          <div class="me-view-comment-author" style="margin-left: 10px;">
            <div style="float:left;">
              <a class="">
                <el-avatar shape="square" style="margin-top: 5px" :size="40" :src="c.avatar"></el-avatar>
              </a>
            </div>
            <div class="me-view-info">
              <span class="me-view-nickname">{{c.nikeName}}</span>  
              <span style="color: #666; font-family: fangsong; font-size: 16px; font-weight: 700;"><span>{{c.createTime}}</span></span>
              <div class="me-view-comment-tools">
                <a class="me-view-comment-tool" @click="showCommentInput(c.id)">
                  <i class="me-icon-comment"></i>回复
                </a>
              </div>
              <p class="me-view-comment-content"><label style="color: rgb(102, 102, 102);">@{{ c.toNikeName }}：</label>{{c.content}}</p>
            </div>
            <commentInput :commentShow="c.id === activeCommentId" :commentObj="c" @getArticleComments="getArticleComments"></commentInput>
            </div>
              <div class="clear"></div>
            </div>
      </div>
    </div>
  </div>
</template>

<script>
import commentInput from './commentInput.vue'
export default {
  name: "CommentItem",
  props: {
    articleId: Number,
    comment: Object,
    index: Number,
    rootCommentCounts: Number
  },
  components: {commentInput},
  data() {
    return {
      // placeholder: '你的评论...',
      commentShow: false,
      commentShowIndex: '',
      // reply: this.getEmptyReply(),
      text: '',
      activeCommentId: null,
      commentObj:{}
    }
  },
  methods: {
    // showComment(commentShowIndex, toUser) {
    //   this.reply = this.getEmptyReply()

    //   if (this.commentShowIndex !== commentShowIndex) {

    //     if (toUser) {
    //       this.placeholder = `@${toUser.nickname} `
    //       this.reply.toUser = toUser
    //     } else {
    //       this.placeholder = '你的评论...'
    //     }

    //     this.commentShow = true
    //     this.commentShowIndex = commentShowIndex
    //   } else {
    //     //关闭评论框
    //     this.commentShow = false
    //     this.commentShowIndex = ''
    //   }
    // },
    showCommentInput(commentId) {
      this.activeCommentId = this.activeCommentId === commentId ? null : commentId
    },
    getArticleComments(){
      this.$emit("getArticleComments")
      this.activeCommentId = null
    }
    // publishComment() {
    //   if(this.reply.content){
    //     this.reply.userId = this.$store.getters.getUser.userId
    //     this.$axios.post('/partJobComment/add/' , this.reply).then(res => {
    //       location.reload()
    //     })
    //   }else{
    //     this.$message({
    //       message: "请输入内容！",
    //       duration: 1000,
    //       type: 'warning'
    //     });
    //   }
    // },
    // getEmptyReply() {
    //   return {
    //     partJobId: this.partJobId,
    //     parentId: this.comment.partJobCommentId,
    //     toUid: this.comment.userId,
    //     content: '',
    //     userId:''
    //   }
    // }
  }
}
</script>

<style scoped>
.me-view-tag-item {
  margin: 0 4px;
}

.me-view-comment {
  margin-top: 60px;
}

.me-view-comment-title {
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.me-view-comment-text {
  font-size: 16px;
}

.v-show-content {
  padding: 8px 25px 15px 0px !important;
}

.v-note-wrapper .v-note-panel {
  box-shadow: none !important;
}

.me-view-comment-item {
  margin-top: 20px;
  padding-bottom: 16px;
}

.me-view-comment-author {
  margin: 10px 0;
  vertical-align: middle;
}

.me-view-nickname {
    font-weight: 700;
    font-size: 1.5em;
    color: #a31f34;
    margin-right: 5px;
}

.me-view-comment-content {
  line-height: 1.5;
}

.me-view-comment-tools {
  margin-top: 4px;
  margin-bottom: 10px;
  float: right;
}

.me-view-comment-tool {
  font-size: 13px;
  color: #a6a6a6;
  padding-right: 14px;
}

.v-note-wrapper .v-note-panel .v-note-show .v-show-content, .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
  background: #fff !important;
}


.me-reply-item {
  margin-top: 10px;
  margin-bottom: 8px;
  /* border-bottom: 1px solid #f0f0f0; */
}

.me-reply-list {
  border-left: 2px gray dashed ;
}

.me-reply-user {
  color: #78b6f7;
}

.me-view-info {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  margin-top: 4px;
  width: 93%;
}
.me-view-meta {
  font-size: 16px;
    color: #666;
    font-family: fangsong;
    font-weight: 700;
    margin-top: 5px;
    margin-left: 10px;
}

.me-view-end {
  margin-top: 20px;
}
.clear{clear:both;} /* 清除空白盒子的所有浮动 */
</style>
